<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Shape Specification</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Shape Specification</p>
<hr class="separator">
<div class="content">Several ChartDirector API accept shape specification as arguments. For example, <a href="BarLayer.setBarShape.htm">BarLayer.setBarShape</a> and <a href="BarLayer.setBarShape2.htm">BarLayer.setBarShape2</a> can be used to specify shapes of bars in bar charts, while <a href="DataSet.setDataSymbol.htm">DataSet.setDataSymbol</a>, <a href="DataSet.setDataSymbol4.htm">DataSet.setDataSymbol4</a>, <a href="PolarLayer.setDataSymbol.htm">PolarLayer.setDataSymbol</a>, <a href="PolarLayer.setDataSymbol4.htm">PolarLayer.setDataSymbol4</a>, <a href="ThreeDScatterGroup.setDataSymbol.htm">ThreeDScatterGroup.setDataSymbol</a> and <a href="ThreeDScatterGroup.setDataSymbol4.htm">ThreeDScatterGroup.setDataSymbol4</a> be used to specify shapes of data symbols.<br><br>
In addition to shapes, in certain chart types, ChartDirector also supports using images or custom draw objects for data representation. For example, see <a href="DataSet.setDataSymbol2.htm">DataSet.setDataSymbol2</a>, <a href="DataSet.setDataSymbol3.htm">DataSet.setDataSymbol3</a>, <a href="PolarLayer.setDataSymbol2.htm">PolarLayer.setDataSymbol2</a>, <a href="PolarLayer.setDataSymbol3.htm">PolarLayer.setDataSymbol3</a>, <a href="ThreeDScatterGroup.setDataSymbol2.htm">ThreeDScatterGroup.setDataSymbol2</a> and <a href="ThreeDScatterGroup.setDataSymbol3.htm">ThreeDScatterGroup.setDataSymbol3</a>.
</div><p class="heading2">Built-In Shapes</p><div class="content">
Built-in shapes are specified as integers. The integers can be constants, or can be generated by a ChartDirector method for parameterized shapes. For example, a circle is represented by a constant <a href="Chart.CircleShape.htm">CircleShape</a> (=7). On the other hand, the number representing a polygon depends on the number of sides of the polygon. It is generated by calling the <a href="Chart.PolygonShape.htm">PolygonShape</a> method, with the number of sides as an argument.<br><br>
The following table illustrates the various ChartDirector shapes:<br><br>
<img src="images/shapes.png" width='500' height='450'><br><br>
<div style="width:100%;box-sizing:border-box;"><table width="100%" border="1" cellpadding="5" cellspacing="0"> <tr><th width="19%">Shape Id<th width="19%%">Value<th>Description <tr><td><a href="Chart.SquareShape.htm">SquareShape</a><td>1<td>Square shape. See (5, 1) above.
<tr><td><a href="Chart.DiamondShape.htm">DiamondShape</a><td>2<td>Diamond shape. See (6, 1) above.
<tr><td><a href="Chart.TriangleShape.htm">TriangleShape</a><td>3<td>Triangle shape pointing upwards. See (7, 1) above.
<tr><td><a href="Chart.RightTriangleShape.htm">RightTriangleShape</a><td>4<td>Triangle shape pointing rightwards. See (1, 2) above.
<tr><td><a href="Chart.LeftTriangleShape.htm">LeftTriangleShape</a><td>5<td>Triangle shape pointing leftwards. See (2, 2) above.
<tr><td><a href="Chart.InvertedTriangleShape.htm">InvertedTriangleShape</a><td>6<td>Triangle shape pointing downwards. See (3, 2) above.
<tr><td><a href="Chart.CircleShape.htm">CircleShape</a><td>7<td>Circle shape. See (1, 1) above.
<tr><td><a href="Chart.GlassSphereShape.htm">GlassSphereShape</a><td>15<td>Glass sphere shape. See (2, 1) above.
<tr><td><a href="Chart.GlassSphere2Shape.htm">GlassSphere2Shape</a><td>16<td>Bright glass sphere shape. See (3, 1) above.
<tr><td><a href="Chart.SolidSphereShape.htm">SolidSphereShape</a><td>17<td>Solid sphere shape. See (4, 1) above.
<tr><td><a href="Chart.StarShape.htm">StarShape</a><td>[Method]<td>Star shapes of various points. See (4, 2), (5, 2), (6, 2), (7, 2), (1, 3), (2, 3), (3, 3), (4, 3) above for stars with 3 to 10 points.
<tr><td><a href="Chart.PolygonShape.htm">PolygonShape</a><td>[Method]<td>Polygon shapes symmetrical about a vertical axis with a vertex at the top center position. See (5, 3) and (7, 3) for polygons of 5 and 6 sides.
<tr><td><a href="Chart.Polygon2Shape.htm">Polygon2Shape</a><td>[Method]<td>Polygon shapes symmetrical about a vertical axis but without any vertex at the top center position. See (6, 5), (1, 4), (2, 4) for polygons of 5, 6 and 7 sides.
<tr><td><a href="Chart.CrossShape.htm">CrossShape</a><td>[Method]<td>'+' shapes. See (3, 4), (4, 4), (5, 4), (6, 4), (7, 4), (1, 5), (2, 5) for '+' shape with arm width of 0.1 - 0.7.
<tr><td><a href="Chart.Cross2Shape.htm">Cross2Shape</a><td>[Method]<td>'X' shapes. See (3, 5), (4, 5), (5, 5), (6, 5), (7, 5), (1, 6), (2, 6) for 'X' shapes with arm width of 0.1 - 0.7.
<tr><td><a href="Chart.ArrowShape.htm">ArrowShape</a><td>[Method]<td>Arrow shapes. See (3, 6), (4, 6), (5, 6), (6, 6), (7, 6), (1, 7), (2, 7), (3, 7), (4, 7), (5, 7), (6, 7), (7, 7) for arrows of various angle, head width, stem width and stem length.
</table></div></div><p class="heading2">Custom Shapes</p><div class="content">
A custom shape can be a simple shape or complex shape.<br><br>
A simple shape can be a polygon or an ellipse. A polygon an be specified as an array of numbers (x0, y0, x1, y1, .....) representing the coordinates of the polygon vertices. As a polygon must have at least 3 vertices, the array must contain at least 6 numbers. If it contains only 4 numbers, it is will considered as an ellipse, with the numbers (x, y, rx, ry) interpreted as the coordinates of the center and the horizontal and vertical radii.<br><br>
A complex shape is composed of multiple simple shapes. For example, a donut is a complex shape composed of two concentric circles. The shape is filled using the even-odd rule. (The web should have a lot of explanation on what is the even-odd rule in graphics.) A complex shape can be specified by including multiple simple shapes in the array, using the <a href="Chart.NewShape.htm">NewShape</a> constant to separate them.<br><br>
The shape should be defined in an area of 1000 x 1000 units, with the x-axis from -500 to 500 going from left to right, and the y-axis from 0 to 1000 going from bottom to top. ChartDirector will automatically scale the polygon so that 1000 units will become to the pixel size as requested by the various ChartDirector API.<br><br>
As an example, the standard diamond shape in ChartDirector is represented as an array with 8 numbers:<br><br>
As an example, the shape of the standard diamond shape in ChartDirector is represented as an array with 8 numbers:<br><br>
<div class="indentedblock"><code>0, 0, 500, 500, 0, 1000, -500, 500</code></div></div><br>
<hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div></body>
</HTML>
